<template>
  <div class="sorteDetail">
    <Header title="店铺"></Header>
    <div class="content">
      <div class="img"></div>
      <div class="foodSort">
        <div class="name">
          {{ title }}
          <img :src="img" alt="" class="store-img" />
        </div>
        <van-tabs color="#ffc400">
          <van-tab
            v-for="(item, index) in storeData"
            :title="item.name"
            :key="index"
          >
            <FoodList :index="index" :foodata="item.data"></FoodList>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="useCart.cartList.length"
        @click="goCart"
      />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="handleAddCart"
      />
      <van-action-bar-button type="danger" text="立即购买" @click="goBuy" />
    </van-action-bar>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Header from "../home/components/Header.vue";
import FoodList from "./components/FoodList.vue";
import { useCartStore } from "../../store/CartSore";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import axios from "axios";
import { getApiSoterData } from "../../api/api";
const useCart = useCartStore();
const router = useRouter();
const title = ref("鱼拿酸菜鱼");
const img = ref(
  "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440"
);
const storeData = ref([]);
const handleAddCart = (type) => {
  let newArray = useCart.cartList || [];
  storeData.value.forEach((item) => {
    item.data.items?.forEach((item) => {
      item.children.forEach((item) => {
        if (item.num > 0) {
          newArray.push(item);
        }
      });
    });
  });
  if (newArray.length === 0) {
    console.log(1111);
    showToast("请选择商品");
    return;
  }
  useCart.addCart(newArray);
  type === "buy" ? goCart() : "";
};
const goCart = () => {
  router.push("/cart");
};
const goBuy = () => {
  handleAddCart("buy");
};
const getSoter = () => {
  // axios.get("home/getStoreData").then((res) => {
  //   console.log(res);
  //   const { code, data} = res.data;
  //   if (code === 200) {
  //     storeData.value = data;
  //   }
  // });
  getApiSoterData().then((res) => {
    storeData.value = res;
  });
};
onMounted(() => getSoter());
</script>

<style scoped lang="less">
.sorteDetail {
  height: 100%;
  display: flex;
  flex-flow: column;
  .content {
    flex: 1;
    overflow-y: auto;
    .img {
      background: url("../../assets/yuna.jpg") no-repeat center/cover;
      width: 100%;
      height: 150px;
    }
    .foodSort {
      height: 500px;
      background-color: #fff;
      margin-top: -30px;
      border-radius: 20px 20px 0 0;
      .name {
        display: flex;
        padding: 20px;
        justify-content: space-between;
        .store-img {
          width: 80px;
          height: 80px;
          border-radius: 10px;
          margin-top: -30px;
        }
      }
    }
  }
}
</style>
